<template>
  <div>
    <el-card>
      <div>
        <div class="avatar-container">
          <el-avatar
            :size="120"
            :src="userInfo.avatarUrl"
            @click="showAvatarPreview"
          ></el-avatar>
          <el-button type="primary" @click="chooseFile" style="margin-top: 10px">更换头像</el-button>
          <input
            type="file"
            accept="image/*"
            ref="fileInput"
            @change="uploadAvatar"
            style="display: none"
          />
          <!--
          <div style="margin: 15px; text-align: center">
            <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/files/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="userInfo.avatar"
                :src="userInfo.avatar"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <el-button
            type="primary"
            @click="changeAvatar"
            style="margin-top: 15px"
          >
            更换头像
          </el-button>
          -->
        </div>
        <div style="margin: 59px 30%">
          <el-form :model="userInfo">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="userInfo.username"
                placeholder="用户名"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="userInfo.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="userInfo.phone" placeholder="电话"></el-input>
            </el-form-item>
            <div style="text-align: center; margin-bottom: 20px">
              <el-button type="primary" @click="update">保 存</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
  <!-- 头像预览 -->
  <el-dialog v-model="dialogVisible" title="预览头像" width="30%">
    <img :src="avatarUrl" alt="Avatar Preview" class="avatar-preview" />
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getUserInfo } from '@/api/user'
import * as http from '@/api/system/index.ts'
import {addSysUser} from "@/api/system/index.ts";
// import { useUserStore } from "@/store/modules/user.ts";
// const user = useUserStore()

// 假设这是从后端获取的数据
const userInfo = ref({
  name: '',
  username: '',
  phone: '',
  avatarUrl:
    'https://tse1-mm.cn.bing.net/th/id/OIP-C._MolZc9ybWaQGJMZP3FrzgAAAA?rs=1&pid=ImgDetMain',
})

// 控制头像预览对话框的显示
const dialogVisible = ref(false)

// 显示头像预览
const showAvatarPreview = () => {
  dialogVisible.value = true
}

// 更换头像的回调函数
const changeAvatar = () => {
  // 这里可以弹出一个文件选择器让用户选择新的头像
  // 假设用户选择了新的头像，我们可以更新 `avatarUrl`
  userInfo.value.avatar = 'https://new-avatar-url.com/new-avatar.jpg'
}
const handleAvatarSuccess = (res, file) => {
  // 这里可以处理上传成功的回调，例如更新用户头像的 URL
  userInfo.value.avatarUrl = res.data
  console.log(file)
}
// 保存管理员用户信息
const update = async () => {
  http.post('/admin/system/user/saveOrUpdate', userInfo.value).then()
  console.log('管理员信息已更改')
  userInfo.value = await addSysUser(userInfo.value)
}
</script>

<style scoped>
.personal-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.form-label {
  display: inline-block;
  margin-right: 10px;
  line-height: 40px; /* 与 el-input 的高度相匹配 */
}

.avatar-preview {
  max-width: 100%;
  max-height: 100%;
}
</style>
